<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="common/css/normalize.css">
    <link rel="stylesheet" href="common/css/public.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/backpack.css">
    <link rel="stylesheet" href="css/task.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="common/js/baidu.js"></script>
    <title>口袋精灵2首页</title>
</head>

<body>
    <div class="main clearfix">
        <div class="content fl">
            <div class="top clearfix">
                <div class="nav fl">
                    <div class="items">
                        <div class="item explore">
                            <a href="explore.html" target="myIframe">
                                <img src="images/index/12.png">
                            </a>
                        </div>
                        <div class="item city">
                            <a href="city/main.html" target="myIframe">
                                <img src="images/index/9.png">
                            </a>
                        </div>
                        <div class="item pet">
                            <a href="pet/pet.html" target="myIframe">
                                <img src="images/index/3.png">
                            </a>
                        </div>
                        <div class="item user-info">
                            <a href="user/user.html" target="myIframe">
                                <img src="images/index/6.png">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="iframe fl">
                    <iframe src="city/main.html" frameborder="0" name="myIframe"></iframe>
                    <div class="icons">
                        <div class="btn" id="backpack-btn"></div>
                        <div class="btn" id="msg"></div>
                        <div class="btn" id="task-btn"></div>
                        <div class="btn" id="favorite"></div>
                    </div>
                </div>
            </div>
            <div class="bottom clearfix">
                <div class="chat-box fl">
                    <div class="chat-info">
                        <input type="text">
                        <img src="images/index/s1.gif">
                        <img src="images/index/s2.gif">
                        <img src="images/index/s3.gif">
                        <img src="images/index/3.gif">
                        <img src="images/index/btn.gif">
                        <img src="images/index/friends.gif">
                    </div>
                </div>
                <div class="info fl">
                    <div class="search">
                        <input id="search-text" type="text">
                        <img src="images/index/so_bg.gif">
                        <img id="search" src="images/index/so_btn.gif">
                    </div>
                </div>
            </div>
        </div>
        <div class="bg fl">

        </div>
        <div id="backpack" class="backpack none">
            <div id="back-exit"></div>
            <ul class="back-items">
                <div class="title">
                    <li class="back-item">
                        <span>图标</span>
                        <span>物品名称</span>
                        <span>类型</span>
                        <span>数量</span>
                    </li>
                </div>
                <div class="back-content">
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/1.gif">
                        </span>
                        <span class="lg">治疗药水(小)</span>
                        <span>治疗类</span>
                        <span>100</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/2.gif">
                        </span>
                        <span class="lg">修炼仙册</span>
                        <span>增益类</span>
                        <span>10000</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/3.gif">
                        </span>
                        <span class="lg">涅槃兽·精灵球</span>
                        <span>捕捉类</span>
                        <span>10320</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/1.gif">
                        </span>
                        <span class="lg">治疗药水(小)</span>
                        <span>治疗类</span>
                        <span>100</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/2.gif">
                        </span>
                        <span class="lg">修炼仙册</span>
                        <span>增益类</span>
                        <span>10000</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/3.gif">
                        </span>
                        <span class="lg">涅槃兽·精灵球</span>
                        <span>捕捉类</span>
                        <span>10320</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/1.gif">
                        </span>
                        <span class="lg">治疗药水(小)</span>
                        <span>治疗类</span>
                        <span>100</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/2.gif">
                        </span>
                        <span class="lg">修炼仙册</span>
                        <span>增益类</span>
                        <span>10000</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/3.gif">
                        </span>
                        <span class="lg">涅槃兽·精灵球</span>
                        <span>捕捉类</span>
                        <span>10320</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/1.gif">
                        </span>
                        <span class="lg">治疗药水(小)</span>
                        <span>治疗类</span>
                        <span>100</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/2.gif">
                        </span>
                        <span class="lg">修炼仙册</span>
                        <span>增益类</span>
                        <span>10000</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/3.gif">
                        </span>
                        <span class="lg">涅槃兽·精灵球</span>
                        <span>捕捉类</span>
                        <span>10320</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/1.gif">
                        </span>
                        <span class="lg">治疗药水(小)</span>
                        <span>治疗类</span>
                        <span>100</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/2.gif">
                        </span>
                        <span class="lg">修炼仙册</span>
                        <span>增益类</span>
                        <span>10000</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/3.gif">
                        </span>
                        <span class="lg">涅槃兽·精灵球</span>
                        <span>捕捉类</span>
                        <span>10320</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/1.gif">
                        </span>
                        <span class="lg">治疗药水(小)</span>
                        <span>治疗类</span>
                        <span>100</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/2.gif">
                        </span>
                        <span class="lg">修炼仙册</span>
                        <span>增益类</span>
                        <span>10000</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/3.gif">
                        </span>
                        <span class="lg">涅槃兽·精灵球</span>
                        <span>捕捉类</span>
                        <span>10320</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/1.gif">
                        </span>
                        <span class="lg">治疗药水(小)</span>
                        <span>治疗类</span>
                        <span>100</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/2.gif">
                        </span>
                        <span class="lg">修炼仙册</span>
                        <span>增益类</span>
                        <span>10000</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/3.gif">
                        </span>
                        <span class="lg">涅槃兽·精灵球</span>
                        <span>捕捉类</span>
                        <span>10320</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/1.gif">
                        </span>
                        <span class="lg">治疗药水(小)</span>
                        <span>治疗类</span>
                        <span>100</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/2.gif">
                        </span>
                        <span class="lg">修炼仙册</span>
                        <span>增益类</span>
                        <span>10000</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/3.gif">
                        </span>
                        <span class="lg">涅槃兽·精灵球</span>
                        <span>捕捉类</span>
                        <span>10320</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/1.gif">
                        </span>
                        <span class="lg">治疗药水(小)</span>
                        <span>治疗类</span>
                        <span>100</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/2.gif">
                        </span>
                        <span class="lg">修炼仙册</span>
                        <span>增益类</span>
                        <span>10000</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/3.gif">
                        </span>
                        <span class="lg">涅槃兽·精灵球</span>
                        <span>捕捉类</span>
                        <span>10320</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/1.gif">
                        </span>
                        <span class="lg">治疗药水(小)</span>
                        <span>治疗类</span>
                        <span>100</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/2.gif">
                        </span>
                        <span class="lg">修炼仙册</span>
                        <span>增益类</span>
                        <span>10000</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/3.gif">
                        </span>
                        <span class="lg">涅槃兽·精灵球</span>
                        <span>捕捉类</span>
                        <span>10320</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/1.gif">
                        </span>
                        <span class="lg">治疗药水(小)</span>
                        <span>治疗类</span>
                        <span>100</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/2.gif">
                        </span>
                        <span class="lg">修炼仙册</span>
                        <span>增益类</span>
                        <span>10000</span>
                    </li>
                    <li class="back-item">
                        <span>
                            <img src="images/backpack/3.gif">
                        </span>
                        <span class="lg">涅槃兽·精灵球</span>
                        <span>捕捉类</span>
                        <span>10320</span>
                    </li>
                </div>
            </ul>
            <div class="back-btn-group">
                <img src="images/backpack/use.png" class="use">
                <img src="images/backpack/tock.png" class="use">
                <img src="images/backpack/clean.png" class="use">
                <img src="images/backpack/throw.png" class="use">
            </div>
        </div>
        <div id="task" class="task none">
            <div id="task-exit"></div>
            <div class="task-items">
                <div class="task-title">任务列表</div>
                <ul class="task-content">
                    <li class="task-item">活动任务</li>
                    <ul class="task-content child none">
                        <li class="task-item">超级礼包兑换券</li>
                        <li class="task-item">超级礼包兑换券</li>
                        <li class="task-item">超级礼包兑换券</li>
                        <li class="task-item">超级礼包兑换券</li>
                        <li class="task-item">超级礼包兑换券</li>
                        <li class="task-item">超级礼包兑换券</li>
                        <li class="task-item">超级礼包兑换券</li>
                        <li class="task-item">超级礼包兑换券</li>
                        <li class="task-item">超级礼包兑换券</li>
                        <li class="task-item">超级礼包兑换券</li>
                        <li class="task-item">超级礼包兑换券</li>
                        <li class="task-item">超级礼包兑换券</li>
                        <li class="task-item">超级礼包兑换券</li>
                        <li class="task-item">超级礼包兑换券</li>
                        <li class="task-item">超级礼包兑换券</li>
                        <li class="task-item">超级礼包兑换券</li>
                    </ul>
                    <li class="task-item">活动任务</li>
                    <li class="task-item">活动任务</li>
                    <li class="task-item">活动任务</li>
                    <li class="task-item">活动任务</li>
                    <li class="task-item">活动任务</li>
                    <li class="task-item">活动任务</li>
                    <li class="task-item">活动任务</li>
                    <li class="task-item">活动任务</li>
                    <li class="task-item">活动任务</li>
                    <li class="task-item">活动任务</li>
                    <li class="task-item">活动任务</li>
                    <li class="task-item">活动任务</li>
                    <li class="task-item">活动任务</li>
                    <li class="task-item">活动任务</li>
                    <li class="task-item">活动任务</li>
                </ul>
            </div>
        </div>
    </div>
    <script src="js/index/backpack.js"></script>
    <script src="js/index/task.js"></script>
</body>

</html>